<template>
<div style="margin:auto;width: max-content;" >
    <div>
        <h1>职称管理</h1>
        科室:<el-input v-model="addName" placeholder="请输入科室名" style="width:200px;margin-right:20px"></el-input> 
        床数:<el-input v-model="addBedNum" placeholder="请输入床数" style="width:200px"></el-input> 
        <el-button type="primary" style="margin-left:20px" @click="onSubmit">添加</el-button>
    </div>

    <el-table :data="keshis.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" max-height="580px" style="width: max-content">
        <el-table-column type="index" width="50" label="序号">  </el-table-column>
            <el-table-column  label="科室" prop="name" width="300" align="center"> </el-table-column>
            <el-table-column  label="床数" prop="bedNum" width="300" align="center"> </el-table-column>
            <el-table-column align="right" width="300">
            <template slot="header" slot-scope="scope">
                <el-input  v-model="search" @change="change(scope)" size="mini"  placeholder="输入科室名关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button>
                <el-button size="mini"  @click="edit(scope.$index,scope.row)">修改</el-button>
                <el-popconfirm title="确定删除吗？"  @confirm="del(scope.row)">
                    <el-button slot="reference"  size="mini" type="danger">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
               <!------详情弹窗start-------->
        <div class="paiban2" v-show="ksysxingqing" style="top: 130px;">
            <el-card>
            <el-table :data="kesiData" height="500"  v-loading="loading"  border style="width: 100%">
                <el-table-column type="index" width="50" label="序号">  </el-table-column>
                <el-table-column prop="name" label="医生姓名" width="270"></el-table-column>
                <el-table-column prop="depName" label="科室" width="260"></el-table-column>
                 <!-- <el-table-column prop="banci" label="操作" width="170">
                        <template slot-scope="scope">
                            <el-button @click="deleteDoc(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column> -->
            </el-table>
            </el-card>
            <el-button type="primary" @click="closexq" style="float:right;margin-right:20px">关闭</el-button>
        </div>
        <el-dialog title="修改科室" :visible.sync="dialogFormVisible" width="max-content">
            <el-form :model="form">
                <el-form-item label="科室" :label-width="formLabelWidth">
                    <el-input v-model="form.editName" autocomplete="off" placeholder="科室名:" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="床数" :label-width="formLabelWidth">
                    <el-input v-model="form.editBedNum" autocomplete="off" placeholder="床数:" style="width:300px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onedit">确 定</el-button>
            </div>
    </el-dialog>
   </div>
</template>

<script>
    import axios from 'axios'
  export default {
    data() {
      return {
        loading:true,
        formLabelWidth:'80px',
        dialogFormVisible:false,
        addBedNum:'',
        addName:'',
        form:{
            editName: '',
            editBedNum:'',
        },
        search: '',
        kesiData: [],
        show1: true,
        ksysxingqing: false,
        keshis:[1],
        id: 0,
        index: 0,
      }
    },
    methods: {
        // deleteDoc(e){
        //     console.log(e);
        //     this.$confirm('确定删除, 是否继续?', '删除医生', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         axios.get("http://localhost:8080/hpl-doctor/deleteDepByDocId?id=" + e.id).then((r) => {
        //             if(r.data.code == 200){
        //                 axios.post("http://localhost:8080/hpl-doctor/getByCondition",{
        //                     depId:e.id
        //                 }).then((r) => {
        //                     if(r.data.code == 200){
        //                         this.kesiData = r.data.data;
        //                     }
        //                 })
        //             }
        //         })     
        //     })
        // },
      onSubmit() {
            axios.post("http://192.168.6.189:8080/hpl-department/add",{
                name:this.addName,
                bedNum:this.addBedNum
                }).then((r) => {
                    if(r.data.code == 200){
                        let keshi = r.data.data;
                        this.keshis.push(keshi)
                }else if(r.data.code == 500){
                     this.$message.error('错了哦，这个科室已经存在');
                }
            })
        },
        onedit(){
             axios.post("http://192.168.6.189:8080/hpl-department/updateName",{
                name:this.editName,
                bedNum:this.editBedNum,
                id:this.id
                }).then((r) => {
                if(r.data.code == 200){
                    this.keshis.splice(this.index,1,r.data.data);
                }
            })
        },
        closexq(){
            this.show1=true;
            this.ksysxingqing=false;
        },
        handleClick(e){
            this.show1=false;
            this.ksysxingqing=true;
           
            axios.post("http://192.168.6.189:8080/hpl-doctor/getByCondition",{
                depId:e.id
            }).then((r) => {
            if(r.data.code == 200){
                this.kesiData = r.data.data;
                this.loading=false;
            }
        })

        },
        edit(index,e){
            this.dialogFormVisible=true;
            this.form.editName = e.name;
            this.form.editBedNum = e.bedNum;
            this.id = e.id;
            this.index = index;
        },
        del(e){
            axios.get("http://192.168.6.189:8080/hpl-department/del?id="+e.id).then((r) => {
                if(r.data.code == 200){
                    axios.get("http://192.168.6.189:8080/hpl-department/htGetAll").then((r) => {
                        if(r.data.code == 200){
                        this.keshis = r.data.data;
                        }
                    })
                }else{
                    alert(r.data.msg)
                }
            })
        }
    },
    mounted() {
        axios.get("http://192.168.6.189:8080/hpl-department/htGetAll").then((r) => {
            if(r.data.code == 200){
                this.keshis = r.data.data;
            }
        })
    }
  }
</script>
<style scoped>
    .paiban2{
        position: absolute;
        top: 0%;
        width: max-content;
        border-radius:5px;
    }
</style>
   